<template>
  <div id="login">
    <div class="Img">
      <img src="@/assets/img/left.jpg" alt="" />
    </div>
    <div class="Box">
      <h1>Login</h1>
      <div class="NoAccount">Don't have on account <span>Register</span></div>
      <div class="form">
        <div :class="Option[0]">
          <div class="title">Account</div>
          <div class="input">
            <div class="Icon">
              <el-icon>
                <cellphone />
              </el-icon>
            </div>
            <input
              @focus="focus(0)"
              @keyup="keyUp(User.account, 0)"
              @blur="blur(User.account, 0)"
              v-model="User.account"
              placeholder="Account"
              type="text"
            />
          </div>
        </div>
        <div :class="Option[1]">
          <div class="title">Password</div>
          <div class="input">
            <div class="Icon">
              <el-icon>
                <key />
              </el-icon>
            </div>
            <input
              @focus="focus(1)"
              @keyup="keyUp(User.password, 1)"
              @blur="blur(User.password, 1)"
              v-model="User.password"
              placeholder="Password"
              type="password"
            />
          </div>
        </div>

        <div :class="Check">
          <div @click="CheckTo()" class="Check Pointer">
            <el-icon><check /></el-icon>
          </div>
          <span class="Pointer" @click="CheckTo()">Remember the password</span>
        </div>
        <button @click="Login()" class="Login Pointer">Sign in</button>

        <div class="MinXie">
          <div class="Icon">
            <el-icon><element-plus /></el-icon>
          </div>
          Element-Plus
        </div>
      </div>
    </div>
    <div @click="CloseRoot()" :class="BackRoot" id="BackRoot">
      <div @click.stop id="RootBox">
        <div @click="CloseRoot()" class="Pointer" id="Close">
          <el-icon><close-bold /></el-icon>
        </div>
        <div id="Root"></div>
      </div>
    </div>
  </div>
</template>


<script lang="ts">
import {
  setCookie,
  getCookie,
  delCookie,
  setToken,
} from "@/utils/Cookies/Cookies";
import { ElMessage } from "element-plus";
import { defineComponent, reactive, toRefs, onMounted } from "vue";
import { LoginData } from "@/PageData/index";
import img from "@/assets/img/1.jpg";
import SlideVerify from "slide-verify";
import { LoginProduct } from "@/api/Product/index";
import router from "@/router";

export default defineComponent({
  setup() {
    const data = reactive<LoginData>({
      User: {
        account: "",
        password: "",
      },
      Option: ["Option", "Option"],
      Check: "CheckBox",
      BackRoot: "",
    });

    const LoginApi = new LoginProduct();
    const methods = {
      CheckTo() {
        if (data.Check == "CheckBox") {
          data.Check = "CheckBox active";
        } else {
          data.Check = "CheckBox";
          delCookie("login");
        }
      },
      blur(str: string, index: number) {
        if (str == "") {
          data.Option[index] = "Option";
        } else {
          data.Option[index] = "Option active";
        }
      },
      focus(index: number) {
        data.Option[index] = "Option active";
      },
      keyUp(str: string, index: number) {
        if (str != "") {
          data.Option[index] = "Option active";
        }
      },
      Login() {
        if (data.User.account == "" || data.User.password == "") {
          ElMessage.error("账号或者密码都不能为空");
          return;
        }

        data.BackRoot = "active";
        const Slide = new SlideVerify({
          elementId: "Root", // DOM挂载点
          onSuccess: () => {
            data.BackRoot = "";

            LoginApi.Login(data.User).then((res) => {
              if (res.result == 0) {
                console.log(res.data);
                ElMessage.success("登录成功");
                setToken(res.data.token);
                router.push("/index");
                if (data.Check == "CheckBox active") {
                  setCookie(
                    "login",
                    JSON.stringify({
                      Account: data.User.account,
                      Password: data.User.password,
                    }),
                    1
                  );
                }
              } else {
                ElMessage.error(res.message);
              }
            });
          },
          onFail: () => {
            ElMessage.error("验证失败");
          },
          onRefresh: () => {}, // 刷新回调
          photo: img, // 背景图片地址
        });
      },
      CloseRoot() {
        data.BackRoot = "";
      },
    };

    onMounted(() => {
      let login = getCookie("login");
      if (login) {
        let Form = JSON.parse(login);
        data.Check = "CheckBox active";
        data.User.account = Form.Account;
        data.User.password = Form.Password;
        data.Option = ["Option active", "Option active"];
      }
    });
    return {
      ...toRefs(data),
      ...methods,
    };
  },
});
</script>
<style scoped>
#login {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: inset 0px 0px 5px var(--ZTS);
  background: #fff;
  min-width: 1300px;
}

.Box {
  width: 450px;
  height: 640px;
  background: #fff;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.05);
  border-radius: 10px;
  padding: 50px 50px;
}

.Box h2 {
  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica,
    Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif;
  margin-top: 30px;
}

.Box .NoAccount {
  height: 50px;
  width: 100%;
  line-height: 50px;
  font-size: 14px;
  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica,
    Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif;
  color: #838098;
}

.Box .NoAccount span {
  color: var(--ZTS);
  cursor: pointer;
}

.Box .form {
  width: 100%;
  height: 100px;
  margin-top: 25px;
}

img {
  margin-right: 50px;
  transition:0.3s;
}

.Option {
  margin-top: 20px;
}

.Option .title {
  height: 40px;
  width: 100%;
  line-height: 40px;
  font-size: 14px;
  color: #838098;
}

.Option .input {
  width: 100%;
  height: 45px;
  border-radius: 5px;
  border: 1px solid #eeecf9;
  display: flex;
  justify-content: flex-start;
  transition: 0.3s;
  overflow: hidden;
}

.Option.active .input {
  border-color: var(--ZTS);
}

.Option.active .input .Icon {
  color: var(--ZTS);
}

.Option .input .Icon {
  transition: 0.3s;

  width: 60px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: #9a96b2;
}

.Option .input input {
  width: calc(100% - 60px);
  height: 100%;
  border: 0;
  outline: none;
  font-size: 15px;
  color: var(--ZTS);
  font-weight: bold;
}

.Option .input input::placeholder {
  color: #9a96b2;
}

.Login {
  width: 100%;
  height: 50px;
  background: var(--ZTS);
  border-radius: 5px;
  color: #fff;
  border: 0;
  outline: none;
  margin-top: 20px;
}

.Login:hover {
  opacity: 0.9;
}

.Login:active {
  transform: scale(0.98);
}

.MinXie {
  width: 100%;
  height: 80px;
  margin-top: 35px;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  color: var(--ZTS);
  align-items: center;
  font-weight: bold;
  font-size: 25px;
}
.MinXie .Icon {
  font-size: 50px;
  color: var(--ZTS);
  margin-bottom: 5px;
}
.CheckBox {
  width: 100%;
  height: 30px;
  margin-top: 20px;
  color: #9a96b2;
  font-size: 14px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.Check {
  width: 18px;
  height: 18px;
  margin-right: 10px;
  border-radius: 5px;
  border: 1px solid #eeecf9;
  color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  transition: 0.3s;
}
.CheckBox.active .Check {
  background: var(--ZTS);
  color: #fff;
}
.CheckBox span {
  transition: 0.3s;
}
.CheckBox.active span {
  color: var(--ZTS);
}
#BackRoot {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0px;
  top: 0px;
  background: rgba(0, 0, 0, 0);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: -1;
  transition: 0.3s;
}
#BackRoot.active {
  background: rgba(0, 0, 0, 0.4);
  z-index: 999;
}

#RootBox {
  opacity: 0;
  transform: translateY(-50px);
  width: 400px;
  background: #fff;
  padding: 40px 20px;
  border-radius: 5px;
  transition: 0.3s;
  position: relative;
}

#BackRoot.active #RootBox {
  opacity: 1;
  transform: translateY(0);
}
#RootBox #Close {
  width: 50px;
  height: 50px;
  background: #fff;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  position: absolute;
  right: -20px;
  top: -20px;
  transition: 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  color: #838098;
}
#RootBox #Close:hover {
  transform: rotateZ(180deg);
}

</style>